<template>
	<view class="box">
		<view class="wrap">
		<view class="wrapitem">
			<view class="text">真实姓名</view>
			<u-input  type="text" placeholder="请输入您的真实姓名"  v-model.trim="name">	</u-input>
		</view>
		<view class="wrapitem">
			<view class="text">手机号</view>
			<input  type="text" placeholder=""  :value="user.mobile" :disabled="true" >	</input>
		</view>
		<view class="wrapitem">
			<view class="text">证件类型</view>
			<text>身份证</text>
		</view>
		<view class="wrapitem">
			<view class="text">身份证号</view>
			<u-input  type="idcard" placeholder="请输入您的身份证号码"  v-model.trim="idcard">	</u-input>
		</view>
		</view>
		<view class="information entry"  v-if="user.is_real==0" >
			<view class="zhengce flex_c" @click="toggleAgree">
				<image :src="baseUrl + '/static/icon/i_xz1.png'" mode="aspectFill" v-if="selectStatus"></image>
				<image :src="baseUrl + '/static/icon/i_wxz.png'" mode="aspectFill" v-if="!selectStatus"></image>
			</view>
			<view class="information_box flex_dq">
				<text>阅读并且同意</text>
				<text  @click.stop="gorule">《实名认证服务协议》</text>
			</view>
		</view>
		<u-popup :show="flag" mode="center" @close="flag=false"  :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">提示</text>
	
				<view class="popup-center">	
					您当前未进行绑定手机号，暂无法实名认证，现在去绑定
				</view>
				<text class="btns" @click="gobind">去绑定</text>
			</view>
		</u-popup>
		<view class="btn" v-if="user.is_real==0" @click="submit()">
			提交实名信息
		</view>
	</view>
</template>

<script>
	import { myuser,authentication,getAuthentication } from '../../api/user'
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				name:"",
				type:"身份证",
				idcard:"",
				flag:false,
				selectStatus:false,
				user:{}
	
			}
		},
		onShow() {
			
			this.getuser()
		},
		
		methods: {
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			gobind(){
				uni.navigateTo({
					url:"/pageUser/myuser/bindphone"
				})
			},
			getAuthentications(){
				getAuthentication().then(res=>{
					this.name=res.data.real_name
					this.idcard=res.data.id_num
				})
			},
			getuser(){
				myuser().then(res=>{
					this.user=res.data
				if(res.data.mobile==''){
					this.flag=true
				}
					if(res.data.is_real==1){
						this.getAuthentications()
					}
				})
			},
			submit(){
				if(!uni.$u.test.idCard(this.idcard)){
					uni.$u.toast("请填写正确的身份证号")
					return
				}
				if(!uni.$u.test.mobile(this.user.mobile)){
					uni.$u.toast("请填写正确手机号")
					return
				}
				authentication({
					real_name:this.name,
					id_num:this.idcard,
					agreement:this.selectStatus
					
				}).then(res=>{
					if(res.code==1){
						uni.setStorageSync('userReal',1)
						uni.$u.toast(res.msg)
						setTimeout(()=>{
							this.leftClick()
						},1500)
					}
				})
			},
			toggleAgree(){
				this.selectStatus=!this.selectStatus
			},
			gorule(){
				uni.navigateTo({
					url:"/pageUser/myuser/realnamerule"
				})
			}
		},
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx;
		
	}

	.wrap {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 24rpx;
		.wrapitem{
			width: 690rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			border-bottom:  2rpx solid #F7F7F7;
			height: 92rpx;
			.text{
				width: 120rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				margin-left: 30rpx;
				margin-right: 52rpx;
			}
			>input{
				color: #333333;
				padding-left: 20rpx;
			}
			>text{
				color: #333333;
				margin-left: 20rpx;
			}
		}
		
	}
	/deep/.uni-input-input{
		color: #333;
		font-weight: 300;
		font-size: 30rpx;
		border: none !important;
	}
	/deep/.u-border {
		border: none;
	}
	.information {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
	}
	.information_box {
		display: flex;
		align-items: flex-start;
		margin-left: 10rpx;
	}
	
	.information_box>text {
		color: #A6A5AF;
		font-size: 24rpx;
	}
	
	.information_box>text:nth-child(2n) {
		color: #FFC300 !important;
	}
	
	.zhengce>image {
		width: 24rpx;
		height: 24rpx;
	}
	.btn{
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 602rpx;
		// height: 406rpx;
		padding-bottom: 50rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		
	
	}
	.popup-title{
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}
	.popup-center{
		width: 484rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: auto;
		>image{
			margin-left: 14rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}
	.btns{
		width: 264rpx;
		height: 72rpx;
	background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 280rpx 280rpx 280rpx 280rpx;
		text-align: center;
		line-height: 72rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>